<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店预订</title>
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- layui css -->
    <link rel="stylesheet" href="../../layui-v2.11.2/css/layui.css">
    <!-- Bootstrap 5 CSS -->
    <link href="../../bootstrap-5.3.6-dist/css/bootstrap.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="book a hotel.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top rounded-4 mb-1">
        <div class="container">
            <a class="navbar-brand fw-bold" href="../index/index.html">
                <i class="bi bi-compass me-2"></i>旅游网
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../index/index.html"><i class="bi bi-house-door me-1"></i>首页</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="#"><i class="bi bi-map me-1"></i>目的地</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../gl/index.html"><i class="bi bi-journal-text me-1"></i>攻略群</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" target="_blank" href="../index/Popular_travelogues/Popular_travelogues.html"><i class="bi bi-people me-1"></i>社区</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <div class="input-group">
                        <input type="search" class="form-control shadow-none" placeholder="搜索目的地..." aria-label="Search">
                        <button class="btn btn-light" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </nav>



    <div class="layui-form">
        <h4>
            <i class="bi bi-house-door-fill"></i> 预订酒店
        </h4>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-inline" id="ID-laydate-rangeLinked">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                </div>
            </div>

            <div class="layui-input-group">
                <input type="text" placeholder="出行目的地" class="layui-input">
                <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                    <i class="layui-icon layui-icon-search"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 特色功能区域 -->
    <div class="container feature-container">
        <ul class="list-unstyled row g-4">
            <div class="col-md-4">
                <li class="feature-item text-center h-100">
                    <i class="bi bi-compass-fill feature-icon"></i>
                    <div>
                        <h2 class="h4">住宿攻略</h2>
                        <p class="mb-0 text-muted">区域攻略到特色主题，应有尽有</p>
                    </div>
                </li>
            </div>
            <div class="col-md-4">
                <li class="feature-item text-center h-100">
                    <i class="bi bi-currency-exchange feature-icon"></i>
                    <div>
                        <h2 class="h4">专享价格</h2>
                        <p class="mb-0 text-muted">多平台价格对比，天天专享特惠</p>
                    </div>
                </li>
            </div>
            <div class="col-md-4">
                <li class="feature-item text-center h-100">
                    <i class="bi bi-person-lines-fill feature-icon"></i>
                    <div>
                        <h2 class="h4">真实点评</h2>
                        <p class="mb-0 text-muted">超过100万真实用户点评和游记</p>
                    </div>
                </li>
            </div>
        </ul>
    </div>

     <!-- 头部标题 -->
    <div class="header">
        <div class="container">
            <h1 class="display-4 fw-bold">主题住宿</h1>
            <p class="lead">发现全球最佳旅行体验</p>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="container mb-5">
        <ul class="nav nav-pills justify-content-center" id="categoryTabs">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-target="weekend"><i class="bi bi-calendar-week me-2"></i>周末好去处</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="beach"><i class="bi bi-umbrella me-2"></i>私人海滩</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="hotel"><i class="bi bi-building me-2"></i>设计酒店</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="food"><i class="bi bi-egg-fried me-2"></i>吃货根据地</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="shopping"><i class="bi bi-bag me-2"></i>血拼购物</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="value"><i class="bi bi-stars me-2"></i>超值酒店</a>
            </li>
        </ul>
    </div>

    <!-- 周末好去处 -->
    <div class="container page-section active" id="weekend">
        <div class="row">
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/84/wKgBZ1mC9HeADwEbAAXqV9zWTPs05.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="崇明岛">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">崇明岛</h3>
                        <p class="destination-location">上海</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/82/wKgBZ1mC9HeAACckABzu6IM-5mw17.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="千岛湖">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">千岛湖</h3>
                        <p class="destination-location">杭州</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/85/wKgBZ1mC9HeAarREABKAJaOA97c61.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="莫干山">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">莫干山</h3>
                        <p class="destination-location">湖州</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/83/wKgBZ1mC9HeAG_qrAAJCv6dFP3M18.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="古北水镇">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">古北水镇</h3>
                        <p class="destination-location">北京</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/85/wKgBZ1mC9HiAbM5qABiNd9-F8oI64.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="避暑山庄">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">避暑山庄</h3>
                        <p class="destination-location">承德</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/81/wKgBZ1mC9HeACZQCADSuIfbXC_Q01.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="北戴河">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">北戴河</h3>
                        <p class="destination-location">秦皇岛</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 私人海滩 -->
    <div class="container page-section" id="beach">
        <div class="row">
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/81/wKgBZ1mC9HeAAAMYAAG6ogNAjvE92.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="长滩岛">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">长滩岛</h3>
                        <p class="destination-location">菲律宾</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/80/wKgBZ1mC9HaAA1PmAAE2QpzDXfo76.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="苏梅岛">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">苏梅岛</h3>
                        <p class="destination-location">泰国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/80/wKgBZ1mC9HaABseWAAElKZXJPLE00.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="芽庄">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">芽庄</h3>
                        <p class="destination-location">越南</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7F/wKgBZ1mC9HaAXe6dAACrD7Bl2Es35.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="兰卡威">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">兰卡威</h3>
                        <p class="destination-location">马来西亚</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s9/M00/3B/FB/wKgBs1dW1xCAXjP5ABii081RqTo85.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="岘港">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">岘港</h3>
                        <p class="destination-location">越南</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7E/wKgBZ1mC9HaAdZD9AARDuy-_cUg63.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="三亚">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">三亚</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 设计酒店 -->
    <div class="container page-section" id="hotel">
        <div class="row">
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7B/wKgBZ1mC9HaAK_QIAAh1pr4J_V417.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="上海">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">上海</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7E/wKgBZ1mC9HaABtPUAAGkiLZDPvE93.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="首尔">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">首尔</h3>
                        <p class="destination-location">韩国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s8/M00/FD/1D/wKgBpVVh6AOAXou1AAksecaTBmQ33.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="哥本哈根">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">哥本哈根</h3>
                        <p class="destination-location">丹麦</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7D/wKgBZ1mC9HaAUCFKAAD-v3b-Siw60.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="纽约">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">HOTEL EDISON</h3>
                        <p class="destination-location">纽约, 美国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7D/wKgBZ1mC9HaANhXIAAFReiDnvuk12.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="柏林">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">柏林</h3>
                        <p class="destination-location">德国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7C/wKgBZ1mC9HaAeSahAAEgn-2DSzU59.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="台中">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">台中</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 吃货根据地 -->
    <div class="container page-section" id="food">
        <div class="row">
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/2B/62/wKgBZ1mNaUCAM69qAAMYG3TYJv488.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="成都">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">成都</h3>
                        <p class="destination-location">四川</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/2B/64/wKgBZ1mNaUCAVahZAAOpWYuWZKs16.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="西安">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">西安</h3>
                        <p class="destination-location">陕西</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/2B/64/wKgBZ1mNaUCALXeoAAGJ79clY3861.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="重庆">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">重庆</h3>
                        <p class="destination-location">重庆</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/2B/65/wKgBZ1mNaUCAJLC3AALBBbjmppg62.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="长沙">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">长沙</h3>
                        <p class="destination-location">湖南</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/2B/63/wKgBZ1mNaUCAdFMZAAEuMSfMesM76.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="澳门">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">澳门</h3>
                        <p class="destination-location">澳门</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/2B/62/wKgBZ1mNaUCAIqjBAAEFUwPDL_A20.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="兰州">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">兰州</h3>
                        <p class="destination-location">甘肃</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 血拼购物 -->
    <div class="container page-section" id="shopping">
        <div class="row">
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s8/M00/AD/BE/wKgBpVYXfeuAfkhfAAzONnUZ0Pc89.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="香港中环">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">香港中环</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s9/M00/36/5F/wKgBs1dL9R2ACK7IABL2hOd1kAk97.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="台北西门町">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">台北西门町</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s9/M00/36/5F/wKgBs1dL9R2AS1S7AAl_8htM64Y62.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="首尔明洞">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">首尔明洞</h3>
                        <p class="destination-location">韩国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s9/M00/36/60/wKgBs1dL9R6AU7DSABr_oYaRnD890.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="北京三里屯">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">北京三里屯</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s9/M00/36/5F/wKgBs1dL9R2AVPz9AA8FFPW3efQ33.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="东京涉谷">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">东京涉谷</h3>
                        <p class="destination-location">日本</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s9/M00/36/5F/wKgBs1dL9R2AU7yoAAvUqnJ2hYI09.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="伦敦SOHO区">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">伦敦SOHO区</h3>
                        <p class="destination-location">英国</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 超值酒店 -->
    <div class="container page-section" id="value">
        <div class="row">
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/78/wKgBZ1mC9HWAbTMdAADNqTBp4GM25.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="塞班岛">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">塞班岛</h3>
                        <p class="destination-location">美国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7B/wKgBZ1mC9HaACEOcAAH5DnGoh5g52.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="香港">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">香港</h3>
                        <p class="destination-location">中国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/79/wKgBZ1mC9HWAVdYoAADp1HMpUFg70.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="巴黎">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">巴黎</h3>
                        <p class="destination-location">法国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7A/wKgBZ1mC9HWAYdUuAAH_rq3CGXg48.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="纽约">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">纽约</h3>
                        <p class="destination-location">美国</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/77/wKgBZ1mC9HWAD_AVAAFcnsJmPEs01.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="东京">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">东京</h3>
                        <p class="destination-location">日本</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card destination-card">
                    <img src="https://p1-q.mafengwo.net/s10/M00/5E/7A/wKgBZ1mC9HWAOHkPAAGO762PFwQ56.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90" class="card-img" alt="新加坡">
                    <div class="card-img-overlay">
                        <h3 class="destination-title">新加坡</h3>
                        <p class="destination-location">新加坡</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4 mb-md-0">
                    <h5><i class="bi bi-compass me-2"></i>旅游网</h5>
                    <p class="mb-2">提供最专业的旅游攻略和社区服务</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-3"><i class="bi bi-facebook fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-twitter fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-instagram fs-4"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-wechat fs-4"></i></a>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="list-inline footer-links mb-3">
                        <li class="list-inline-item me-3"><a href="#">关于我们</a></li>
                        <li class="list-inline-item me-3"><a href="#">隐私政策</a></li>
                        <li class="list-inline-item me-3"><a href="#">使用条款</a></li>
                        <li class="list-inline-item"><a href="#">联系我们</a></li>
                    </ul>
                    <p class="mb-0 small">
                        © 2025 旅游网. 23软件技术2班. 版权所有 
                    </p>
                </div>
            </div>
        </div>
    </footer>
    
    <script src="../../bootstrap-5.3.6-dist/js/bootstrap.js"></script>
    <script src="../../layui-v2.11.2/layui.js"></script>
    <script src="book a hotel.js"></script>

</body>
</html>